<template>
  <view class="goods-detail-container">
    <!-- 轮播图区域 -->
    <swiper :autoplay="true" :interval="3000" :duration="1000" :circular="true">
      <!-- 循环渲染轮播图的 item 项 -->
      <swiper-item v-for="(item, i) in goodsDefaultInfo.goodsPic" :key="i">
        <view class="swiper-item">
          <!-- 动态绑定图片的 src 属性 -->
          <image :src="imgPrefixAddress + item"></image>
        </view>
      </swiper-item>
    </swiper>
    <!-- 价格信息处 -->
    <view class="price">
      <view class="price_num">¥ {{goodsDefaultInfo.goodsPrice}}</view>
      <text>{{goodsDefaultInfo.goodsName}}</text>
    </view>
    <!-- 分割线 -->
    <u-line length="100%"></u-line>
    <!-- 规格材质板块 -->
    <view class="material">
      <!-- 选择规格 -->
      <view class="choose-material">
        <view class="left">
          选择规格
        </view>
        <view class="material-detail">
          <view v-for="(item,index) in goodsGuigeInfo" :key="index" :class="isActive == index ? 'active' : ''"
            @click="chooseActive(item,index)">
            {{item.name}}
          </view>
        </view>
      </view>
    </view>
    <u-line length="100%"></u-line>
    <!-- 配送方式 -->
    <view class="a-b-c">
      <view class="title">
        配送方式
      </view>
      <view class="content">
        物流配送
      </view>
    </view>
    <u-line length="100%"></u-line>
    <!-- 品牌 -->
    <view class="a-b-c">
      <view class="title">
        商品尺寸
      </view>
      <view class="content">
        {{goodsSize}}
      </view>
    </view>
    <u-line length="100%"></u-line>
    <!-- 商品参数 -->
    <view class="a-b-c">
      <view class="title">
        构造信息
      </view>
      <view class="content">
        {{goodsDefaultInfo.material}}
      </view>
    </view>
    <u-line length="100%"></u-line>
    <!-- 商品详情 -->
    <view class="goods-detail-bottom">
      商品详情
    </view>
    <!-- 商品详情图 -->
    <view class="goods-detail-picrure">
      <image :src="imgPrefixAddress + item" v-for="(item,index) in goodsDefaultInfo.detailPic" :key="index"
        mode="widthFix"></image>
    </view>
    <!-- 商品导航 -->
    <view class="goods-nav">
      <uni-goods-nav :fill="true" :options="options" :buttonGroup="buttonGroup" @click="onClick"
        @buttonClick="buttonClick" />
    </view>
    <!-- 底部弹出层 -->
  </view>
</template>

<script>
  import {
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        isActive: 0,
        // 商品规格信息
        goodsGuigeInfo: [],
        goodsSize: null,
        // 传给后台的商品数据
        houGoods: {},
        // 商品第一次进入的默认信息
        goodsDefaultInfo: {
          goodsPrice: 0,
          goodsGuige: '',
          goodsName: '',
          goodsPic: [],
          goodsId: 0,
          sonId: 0,
          material: '',
          dimensionsName: ''
        },
        //图片前缀
        imgPrefixAddress: "https://bjlr-1316909348.cos.ap-chengdu.myqcloud.com",
        //商品导航
        options: [{
          icon: 'headphones',
          text: '客服'
        }, {
          icon: 'star-filled',
          text: '收藏',
        }, {
          icon: 'cart',
          text: '购物车',
        }],
        buttonGroup: [{
            text: '加入购物车',
            backgroundColor: '#D9E0E8',
            color: '#141414'
          },
          {
            text: '立即购买',
            backgroundColor: '#141414',
            color: '#fff'
          }
        ],
        // 商品导航结束
        // 屏幕可用高度
        wh: 0
      };
    },
    methods: {
      chooseActive(goods, i) {
        console.log(goods);
        this.isActive = i
        this.goodsDefaultInfo.goodsPrice = goods.retailValue
        this.goodsDefaultInfo.goodsGuige = goods.name
        this.goodsDefaultInfo.sonId = goods.sonId
        this.goodsSize = goods.dimensions
      },
      chooseNum(e) {
        console.log(e);
      },
      // 把 m_user 模块中的 updateRedirectInfo 方法映射到当前页面中使用
      ...mapMutations('m_user', ['updateRedirectInfo']),
      onClick(e) {
        if (e.index == 2) {
          uni.navigateTo({
            url: "/subpkg/buyCar/buyCar"
          })
        } else if (e.index == 1) {
          this.addShoucang(this.goodsDefaultInfo.goodsId)
        }
      },
      async addShoucang(id) {
        const res = await uni.$http.get(`/main/query/addToFavorites/${id}`)
        if (res.data.code !== 200) return uni.$showMsg('添加收藏失败')
        uni.$showMsg('添加收藏成功')
      },
      // 加入购物车 && 立即购买
      buttonClick(e) {
        // 1. 判断是否点击了 加入购物车 按钮
        if (e.content.text === '加入购物车') {
          this.addShoppingCar()
        }
        // 判断是否点击了立即购买
        if (e.content.text === '立即购买') {
          let that = this
          uni.navigateTo({
            url: '/subpkg/buyNow/buyNow',
            success(res) {
              res.eventChannel.emit('acceptDataFromOpenerPage', that.goodsDefaultInfo)
            }
          })
        }
      },
      // 加入购物车
      async addShoppingCar() {
        const res = await uni.$http.post('/flow/cart/add', this.houGoods)
        if (res.data.code !== 200) {
          uni.$showMsg('添加购物车失败')
        } else {
          uni.$showMsg('添加成功')
        }
      },
      async getGoodsDetail(goodsId) {
        const {
          data: res
        } = await uni.$http.post('/main/query/commoditydetails', {
          goodsId
        })
        if (res.code !== 200) return uni.$showMsg()
        this.goodsDefaultInfo.goodsId = res.data.goods.goodsId
        this.goodsGuigeInfo = res.data.specifications
        this.goodsDefaultInfo.material = res.data.goods.material
        this.goodsDefaultInfo.dimensionsName = res.data.goods.dimensionsName
        // goodsGuige
        this.goodsDefaultInfo.goodsGuige = res.data.specifications[0].name
        this.goodsSize = res.data.specifications[0].dimensions
        this.goodsDefaultInfo.sonId = res.data.specifications[0].sonId
        // dimensionsName
        // 加入购物车需要的ID
        this.houGoods = {
          goodsId: res.data.specifications[0].goodsId,
          sonId: res.data.specifications[0].sonId
        }
        this.goodsDefaultInfo.goodsPic = res.data.goods.goodsPreviews.split(',') // 处理过后的图片 轮播图
        this.goodsDefaultInfo.detailPic = res.data.goods.detailChart.split(',') // 处理过后的图片 详情图
        this.goodsDefaultInfo.goodsName = res.data.goods.goodsName // 商品名字
        //取出默认商品价格
        res.data.specifications.forEach(item => {
          if (item.preference == "0") {
            this.goodsDefaultInfo.goodsPrice = item.retailValue
          }
        })

      }


    },
    onLoad(options) {
      const sysInfo = uni.getSystemInfoSync()
      this.wh = sysInfo.windowHeight + 75
      const goodsId = options.goodsId
      this.getGoodsDetail(goodsId)
    }


  }
</script>

<style lang="scss">
  .goods-detail-container {
    padding-bottom: 50px;
  }

  swiper {
    height: 370px;
    width: 370px;
    margin: 0 auto;

    .swiper-item,
    image {
      width: 100%;
      height: 100%;
    }
  }

  // 价格信息处
  .price {
    padding: 0 40rpx 20rpx 40rpx;
    background-color: #FFFFFF;
    height: 80px;

    .price_num {
      font-size: 20px;
      font-weight: bold;
      color: #A50000;
    }

    text {
      display: block;
      font-size: 14px;
      line-height: 24px;
      color: #141414;
      margin-top: 10px;
    }
  }



  // 规格材质板块
  .material {
    padding: 20rpx 40rpx;
    background-color: #FFFFFF;
    margin-top: 30rpx;

    .choose-material {
      display: flex;
      width: 100%;

      .material-detail {
        margin-left: 30rpx;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-evenly;

        view {
          width: 125rpx;
          padding: 0 10px;
          height: 30px;
          border-radius: 24px;
          border: 1px solid #B8C1CC;
          font-size: 14px;
          color: #66737F;
          text-align: center;
          line-height: 30px;
          white-space: nowrap;
          text-overflow: ellipsis;
          overflow: hidden;
        }

        .active {
          background-color: #D9E0E8;
        }
      }

      .left {
        height: 30px;
        line-height: 30px;
        text-align: center;
        font-size: 14px;
        color: #8F9CA9;
      }

    }
  }

  // 选择数量
  .choose-number {
    padding: 20rpx 40rpx;
    margin-top: 30rpx;
    display: flex;

    .title {
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
      color: #8F9CA9;
    }

    .choose-input {
      margin-left: 30rpx;
      width: 170px;
      height: 30px;


    }
  }

  // 配送方式
  .a-b-c {
    padding: 20rpx 40rpx;
    margin-top: 30rpx;
    display: flex;

    .title {
      width: 60px;
      height: 30px;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
      color: #8F9CA9;
    }

    .content {
      margin-left: 30rpx;
      line-height: 30px;
      text-align: center;
      font-size: 14px;
      color: black;
    }
  }

  // 商品详情
  .goods-detail-bottom {
    width: 100%;
    height: 43px;
    line-height: 43px;
    text-align: center;
    font-size: 18px;
    color: #141414;
    margin-top: 20rpx;
  }

  // 商品详情图
  .goods-detail-picrure {
    width: 100%;

    image {
      width: 100%;
    }
  }

  // 商品导航
  .van-button--warning {
    color: #141414 !important;
  }

  .goods-nav {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
  }
</style>